import React from "react"
import {
  ArrowRight,
  BarChart3,
  Database,
  FileText,
  Settings,
  TrendingDown,
  TrendingUp,
  Users,
  EllipsisVertical
} from "lucide-react"
import { Card, CardContent } from "@/components/ui/card"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

// 统计数据
const stats = [
  { title: "总项目数", value: "12", change: "+2 本月", icon: <FileText className="w-5 h-5" />, trend: "up" },
  { title: "运行中任务", value: "3", change: "+1 本月", icon: <BarChart3 className="w-5 h-5" />, trend: "up" },
  { title: "数据源", value: "8", change: "+1 本月", icon: <Database className="w-5 h-5" />, trend: "up" },
  { title: "团队成员", value: "5", change: "无变化", icon: <Users className="w-5 h-5" />, trend: "none" }
]

// 快捷操作
const quickActions = [
  { title: "创建新项目", icon: <FileText className="w-5 h-5" />, color: "bg-blue-500" },
  { title: "查看报表", icon: <BarChart3 className="w-5 h-5" />, color: "bg-green-500" },
  { title: "管理数据源", icon: <Database className="w-5 h-5" />, color: "bg-purple-500" },
  { title: "系统设置", icon: <Settings className="w-5 h-5" />, color: "bg-yellow-500" }
]

// 最近项目
const recentProjects = [
  { id: 1, title: "智能客服系统", updatedAt: "2 小时前", status: "active" },
  { id: 2, title: "数据处理管道", updatedAt: "1 天前", status: "active" },
  { id: 3, title: "内容安全审核", updatedAt: "3 天前", status: "inactive" }
]

/**
 * 仪表盘页面
 */
const DashboardPage = () => {
  return (
    <div>
      {/* 欢迎 */}
      <div className="mb-8">
        <h2 className="text-2xl font-bold text-text-primary mb-2">欢迎回来，用户</h2>
        <p className="text-text-secondary">这里是您的 FlowForge 工作台，您可以管理项目、查看数据和配置系统设置。</p>
      </div>

      {/* 数据统计卡片 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        {stats.map((stat, index) => (
          <Card key={index} className="dark:bg-gray-800">
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-gray-500 dark:text-gray-400">{stat.title}</p>
                  <h3 className="text-2xl font-bold text-gray-900 dark:text-white mt-1">{stat.value}</h3>
                </div>
                <div className="p-3 rounded-full bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-300">
                  {stat.icon}
                </div>
              </div>
              <div className="mt-4">
                <p
                  className={cn(
                    "text-sm flex items-center",
                    stat.trend === "up"
                      ? "text-green-600 dark:text-green-400"
                      : stat.trend === "down"
                      ? "text-red-600 dark:text-red-400"
                      : "text-gray-500 dark:text-gray-400"
                  )}
                >
                  {stat.trend === "up" && <TrendingUp className="mr-1 h-4 w-4" />}
                  {stat.trend === "down" && <TrendingDown className="mr-1 h-4 w-4" />}
                  {stat.change}
                </p>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* 快捷操作  */}
      <div className="mb-8">
        <h3 className="text-lg font-semibold text-text-primary mb-4">快捷操作</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          {quickActions.map((action, index) => (
            <Card key={index} className="dark:bg-gray-800 hover:shadow-md transition-shadow">
              <CardContent className="p-4">
                <div className="flex flex-col items-center cursor-pointer">
                  <div className={`p-3 rounded-full ${action.color} text-white mb-3`}>{action.icon}</div>
                  <span className="text-sm font-medium text-text-primary">{action.title}</span>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      {/* 最近项目 */}
      <div>
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">最近项目</h3>
          <Button
            variant="ghost"
            size="sm"
            className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
          >
            查看全部
            <ArrowRight className="h-4 w-4" />
          </Button>
        </div>
        <Card className="dark:bg-gray-800">
          <CardContent className="p-0">
            <div className="divide-y divide-gray-200 dark:divide-gray-700">
              {recentProjects.map((project) => (
                <div key={project.id} className="p-4">
                  <div className="flex items-center">
                    <div className="p-3 rounded-lg bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-300 mr-4">
                      <FileText className="h-6 w-6" />
                    </div>
                    <div className="flex-1">
                      <h4 className="font-semibold text-gray-900 dark:text-white">{project.title}</h4>
                      <div className="flex items-center mt-1">
                        <span
                          className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
                            project.status === "active"
                              ? "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300"
                              : "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300"
                          }`}
                        >
                          {project.status === "active" ? "运行中" : "已停止"}
                        </span>
                        <span className="ml-2 text-sm text-gray-500 dark:text-gray-400">
                          更新于 {project.updatedAt}
                        </span>
                      </div>
                    </div>
                    <Button variant="ghost" size="sm">
                      <EllipsisVertical className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}

export default DashboardPage
